<template>
    <div class="page">
        <div class="detailItem">
            <div class="cardTop">
                <div>{{ detailInfo.customerName }}</div>
                <div>
                    {{ allInfo.isSelf == 'Y' ? '直属' : '非直属' }}
                    <!-- 查看详情
                    <img src="@/assets/icon/goIcon.png" /> -->
                </div>
            </div>
            <van-cell>
                <!-- 标题插槽 -->
                <template #title>
                    <span class="custom-title">注册时间</span>
                </template>
                <!-- 默认右侧插槽 -->
                <span class="custom-title">{{ formatTime(detailInfo.createTime) }}</span>
            </van-cell>
            <van-cell center>
                <template #title>
                    <span class="custom-title">商户编号</span>
                </template>
                <div>
                    <span class="custom-title">
                        {{ detailInfo.customerNo }}
                    </span>
                </div>
                <template #right-icon>
                    <img @click="onCopy(detailInfo.customerNo)" class="isCopy" src="@/assets/icon/copy.png" />
                </template>
            </van-cell>
            <van-cell>
                <template #title>
                    <span class="custom-title">唤醒状态</span>
                </template>
                <span class="custom-title" v-if="allInfo.activateTime != ''">已唤醒</span>
                <span class="custom-title" v-else>未唤醒</span>
            </van-cell>
            <van-cell v-if="allInfo.activateTime">
                <template #title>
                    <span class="custom-title">唤醒时间</span>
                </template>
                <span class="custom-title">{{ formatTime(allInfo.activateTime) }}</span>
            </van-cell>
            <!-- <van-cell v-if="allInfo.standerTime != ''">
                <template #title>
                    <span class="custom-title">达标时间</span>
                </template>
                <span class="custom-title">{{ formatTime(allInfo.standerTime) }}</span>
            </van-cell> -->
        </div>
        <div class="detailItem checkResgister" @click="onCheckRes">
            <div style="display:flex;align-items:center"><img class="cityIcon" src="@/assets/icon/cityIcon.png" />查看当前商户可注册机构</div>
            <img src="@/assets/icon/arrow_right2.png" />
        </div>
        <div class="detailItem" style="padding-bottom: 10px; margin-top: 10px" v-for="(item, index) in posInfo" :key="index">
            <div class="cardTop npbg">
                <div>{{ item.actCode }}</div>
            </div>
            <van-cell>
                <!-- 标题插槽 -->
                <template #title>
                    <span class="custom-title">机具编号</span>
                </template>
                <!-- 默认右侧插槽 -->
                <span class="custom-title">{{ item.tusn }}</span>
            </van-cell>
            <van-cell v-if="allInfo.MAX_ZFB && allInfo.MAX_ZFB.rate">
                <!-- 标题插槽 -->
                <template #title>
                    <span class="custom-title">大额支付宝成本</span>
                </template>
                <!-- 默认右侧插槽 -->
                <span class="custom-title">{{ allInfo.MAX_ZFB.rate }} %</span>
            </van-cell>
            <van-cell v-if="item.deposit">
                <template #title>
                    <span class="custom-title">服务费金额</span>
                </template>
                <span class="custom-title">{{ item.deposit }}元</span>
            </van-cell>
            <van-cell v-if="allInfo.DEDUCT_AMOUNT">
                <template #title>
                    <span class="custom-title">通讯费应扣费金额</span>
                </template>
                <span class="custom-title">{{ allInfo.DEDUCT_AMOUNT }}元</span>
            </van-cell>
            <van-cell v-if="allInfo.DEDUCT_TIME">
                <template #title>
                    <span class="custom-title">通讯费应扣费时间</span>
                </template>
                <span class="custom-title">{{ formatTime(allInfo.DEDUCT_TIME) }}</span>
            </van-cell>
            <!-- 费率政策 -->
            <div class="cardBottom">
                <div class="tableItem tableHead">
                    <span class="col">费率政策</span>
                    <span class="col">贷记卡</span>
                    <span class="col">借记卡</span>
                    <span class="col">扫码</span>
                </div>
                <div class="tableItem tableBoday">
                    <div class="row">
                        <span class="col">T0</span>
                        <span class="col isnum">{{ allInfo.STANDARD_CREDIT_CARD_T0.rate }}</span>
                        <span class="col isnum">{{ allInfo.DEBIT_CARD_T0 ? allInfo.DEBIT_CARD_T0.rate : '无' }}</span>
                        <span class="col isnum">{{ allInfo.DEFAULT_DEFAULT.rate }}</span>
                    </div>
                    <div class="row">
                        <span class="col">T1</span>
                        <span class="col isnum">{{ allInfo.CREDIT_CARD_T1.rate }}</span>
                        <span class="col isnum">{{ allInfo.DEBIT_CARD_T1.rate }}</span>
                        <span class="col isnum">{{ allInfo.DEFAULT_DEFAULT.rate }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 交易金额统计 -->
        <div class="detailItem" style="margin-top: 10px">
            <div class="cardTop npbg">
                <div>
                    <img style="width: 22px; height: 15px; margin-right: 10px" src="@/assets/switchIcon.png" />
                    交易额统计(元)
                </div>
            </div>
            <div class="jytj">
                <div class="left">
                    <div class="row bottomLine" @click="goEaring('', '总', parseTime(detailInfo.createTime, '{y}-{m}-{d}'))">
                        <div class="itemTit">累计交易额</div>
                        <div class="itemNum">{{ jtInfo.TOTALAMOUNT }}</div>
                    </div>
                    <div class="row bottomLine" @click="goEaring('POS_CREDIT', '本月')">
                        <div class="itemTit">本月贷记卡交易额</div>
                        <div class="itemNum">{{ jtInfo.POS_CREDIT }}</div>
                    </div>
                    <div class="row bottomLine" @click="goEaring('POS_FLASH', '本月')">
                        <div class="itemTit">本月云闪付交易额</div>
                        <div class="itemNum">{{ jtInfo.POS_FLASH }}</div>
                    </div>
                    <div class="row bottomLine" @click="goEaring('UNIONPAY', '本月')">
                        <div class="itemTit">本月银联扫码交易额</div>
                        <div class="itemNum">{{ jtInfo.UNIONPAY }}</div>
                    </div>
                    <!-- <div class="row" @click="goEaring('VIP','本月')">
                        <div class="itemTit">VIP</div>
                        <div class="itemNum">{{ jtInfo.VIP }}</div>
                    </div> -->
                </div>
                <div class="right">
                    <div class="row bottomLine" @click="goEaring('', '本月')">
                        <div class="itemTit">本月总交易额</div>
                        <div class="itemNum">{{ jtInfo.AMOUNT }}</div>
                    </div>
                    <div class="row bottomLine" @click="goEaring('POS_DEBIT', '本月')">
                        <div class="itemTit">本月借记卡交易额</div>
                        <div class="itemNum">{{ jtInfo.POS_DEBIT }}</div>
                    </div>
                    <div class="row bottomLine" @click="goEaring('WXPAY', '本月')">
                        <div class="itemTit">本月微信扫码交易额</div>
                        <div class="itemNum">{{ jtInfo.WXPAY }}</div>
                    </div>
                    <div class="row bottomLine" @click="goEaring('ALIPAY', '本月')">
                        <div class="itemTit">本月支付宝扫码交易额</div>
                        <div class="itemNum">{{ jtInfo.ALIPAY }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 交易统计图表 -->
        <div class="detailItem" style="margin-top: 10px">
            <div class="cardTop npbg">
                <div>
                    <img style="width: 22px; height: 15px; margin-right: 10px" src="@/assets/switchIcon.png" />
                    交易统计(万元)
                </div>
                <div @click="checkDeail">
                    查看明细
                    <img src="@/assets/icon/arrow_right2.png" />
                </div>
            </div>
            <div style="margin-top: 10px">
                <van-tabs background="#fff" color="#66d6ff" v-model:active="jyTag" type="card" @click-tab="onClickTab">
                    <van-tab title="近10天" name="day"></van-tab>
                    <van-tab title="近半年" name="month"></van-tab>
                </van-tabs>
            </div>
            <div class="jytjBox" id="jytjBoxs"></div>
        </div>
        <van-popup v-model:show="ableResgister" round>
            <div class="popupContent">
                <div class="title">
                    <div class="isTit">注册指引</div>
                    <div class="secTit">请留意品牌当前的注册状态</div>
                </div>
                <div class="mainContent" v-for="item in regeisyerList" :key="item.agencySource">
                    <div class="resource">
                        <img  v-if="item.agencySource === 'LS'"  src="@/assets/merchant/ls.png" />
                        <img v-if="item.agencySource === 'HLB'"  src="@/assets/merchant/hlb.png" />
                        <img v-if="item.agencySource === 'QB'"  src="@/assets/merchant/qb.png" />
                        <img v-if="item.agencySource === 'UEN'"  src="@/assets/merchant/hk.png" />
						<img v-if="item.agencySource === 'SFT'"  src="@/assets/merchant/logo/sft.ico" />
                        <span>{{item.agencySource == 'LS'?'乐刷': item.agencySource == 'HLB'?'合利宝': item.agencySource == 'UEN'?'海科': item.agencySource == 'QB'?'钱宝':item.agencySource == 'SFT'?'盛付通':''}}</span>
                    </div>
                    <div class="canUse">
                        <span v-if="item.status == 'COMPLETED'" style="color:#009960">已注册</span>
                        <span v-if="item.status == 'PASSABLE'">可注册</span>
                        <span v-if="item.status == 'OBSTRUCT'" style="color:#888888">不可注册</span>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { isfindByCustNo, findMouthTrade, findTradeByDayOrMoth,checkRegister } from '@/api/merchants'
import { showToast } from 'vant'
import * as echarts from 'echarts'
import { parseTime } from '@/utils/utils.ts'
const route = useRoute()
const router = useRouter()
// 用户基本信息
const detailInfo = ref({})
// 用户基本信息
const posInfo = ref([])
// 机具类型
const posType = ref('')
// 图表查月份还是年分
const jyTag = ref('day')
// 所有的数据
const allInfo = ref({})
// 机构可以注册
const regeisyerList = ref([])



// 交易额统计信息
const jtInfo = ref({
    TOTALAMOUNT: 0.0,
    POS_CREDIT: 0.0,
    POS_FLASH: 0.0,
    UNIONPAY: 0.0,
    VIP: 0.0,
    AMOUNT: 0.0,
    POS_DEBIT: 0.0,
    WXPAY: 0.0,
    ALIPAY: 0.0
})
const getInfo = () => {
    // 获取机具/商户信息
    isfindByCustNo({
        customerNo: route.query.CUSTOMER_NO,
        agencySource: route.query.agencySource,
    }).then(res => {
        allInfo.value = res.object
        detailInfo.value = res.object.custInfoBean
        posInfo.value = res.object.posList
        posType.value = res.object.posType
    })
    // 获取交易额统计
    findMouthTrade({ customerNo: route.query.CUSTOMER_NO }).then(res => {
        jtInfo.value = res.object
    })
}
const chartsY = ref([])
const chartsX = ref([])
// 查询本月对应数据
const goEaring = (type, time, startTime) => {
    console.log(`/transactionDetail?transType=${type}`, '`/transactionDetail?type=${type}`')
    router.push(`/transactionDetail?CUSTOMER_NO=${route.query.CUSTOMER_NO}&transType=${type}&time=${time}&startTime=${startTime}`)
}
const ableResgister = ref(false)
const onCheckRes = () => {
    checkRegister({
        customerNo:route.query.CUSTOMER_NO,
    }).then(res => {
        regeisyerList.value = res.object
        ableResgister.value = true
    })
}
const echartDate = () => {
    findTradeByDayOrMoth({
        customerNo: route.query.CUSTOMER_NO,
        agencySource: route.query.agencySource,

        tag: jyTag.value
    }).then(res => {
        chartsY.value = res.object.map(val => val.AMOUNT)
        if (jyTag.value == 'day') {
            chartsX.value = res.object.map(val => {
                return val.DAYS
            })
        } else if (jyTag.value == 'month') {
            chartsX.value = res.object.map(val => {
                return val.MON
            })
        }
        createBar(chartsX.value, chartsY.value)
    })
}

getInfo()
echartDate()
const onClickTab = ({ name }) => {
    jyTag.value = name
    echartDate()
}
const createBar = (data1, data2) => {
    // console.log(dataX, dataY, '创建表单了jytjBoxs走到这里了没问题')
    var chartDoms = document.getElementById('jytjBoxs')
    var myChart = echarts.init(chartDoms)
    // 由于echars机制原因 再次进入页面创建新的canvas 需要清空之前的echarts图，如果未清除，echarts 就会显示失败(关键代码)
    document.getElementById('jytjBoxs').setAttribute('_echarts_instance_', '')
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: data1,
            axisLabel: {
                show: true,
                rotate: 45 // 设置x轴标签旋转角度
            }
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            left: '20', // 固定左边刻度宽度
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        color: ['#66d6ff'],
        series: [
            {
                data: data2,
                type: 'bar'
            }
        ]
    }

    option && myChart.setOption(option)
    console.log('创建完成!!!!')
}

// 复制内容
const onCopy = val => {
    const copyText = val
    const input = document.createElement('input')
    input.value = copyText
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
    showToast('复制成功')
}
const checkDeail = () => {
    router.push(`/transactionDetail?CUSTOMER_NO=${route.query.CUSTOMER_NO}&transType=${''}&time=${'当天'}`)
}
// 时间戳格式化
const formatTime = time => {
    let date = new Date(time)

    let year = date.getFullYear()

    let month = date.getMonth() + 1

    let day = date.getDate()

    let hour = date.getHours()

    let minute = date.getMinutes()

    let second = date.getSeconds()

    return (
        year +
        '-' +
        month.toString().padStart(2, '0') +
        '-' +
        day.toString().padStart(2, '0') +
        ' ' +
        hour.toString().padStart(2, '0') +
        ':' +
        minute.toString().padStart(2, '0') +
        ':' +
        second.toString().padStart(2, '0')
    )
}
</script>
<style scoped lang="scss">
::v-deep .van-cell__value {
    min-width: 60%;
}
.page {
    padding: 10px;
    .detailItem {
        background: #fff;
        border-radius: 8px;
    }
    .checkResgister {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        padding: 10px 10px;
        font-size: 15px;
        .cityIcon{
            width:20px;
            height:20px;
            margin-right:10px;
        }
        img {
            width: 14px;
            height: 14px;
        }
    }
    .isCopy {
        width: 15px;
        height: 15px;
        margin-left: 10px;
    }
    .cardTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        background: linear-gradient(180deg, #66d6ff 0%, #66d6ff 100%);
        opacity: 1;
        border-radius: 8px 8px 0px 0px;
        padding: 0 10px;
        color: #fff;
        img {
            width: 14px;
            height: 14px;
        }
    }
    .npbg {
        background: #fff !important;
        color: #000000;
        border-bottom: 1px solid #e8e8e8;
        margin-top: 10px;
    }
    .cardBottom {
        width: 97%;
        background: #e1e9ff;
        opacity: 1;
        border-radius: 8px;
        padding-bottom: 10px;
        margin: 0 auto;
        margin-top: 20px;
        .tableHead {
            display: flex;
            // justify-content: space-around;
            line-height: 50px;
            padding: 0 10px;
        }
        .tableBoday {
            width: 96%;
            margin: 0 auto;
            background: #fff;
        }
        .tableItem {
            .row {
                display: flex;
                // justify-content: space-around;
                margin-bottom: 10px;
                line-height: 30px;
                .isnum {
                    color: #66d6ff;
                }
            }
            .col {
                text-align: center;
                width: 25%;
            }
        }
    }
    .jytj {
        display: flex;
        padding: 16px;
        .left {
            flex: 1;
            border-right: 1px solid #e8e8e8;
        }
        .right {
            flex: 1;
        }
        .bottomLine {
            border-bottom: 1px solid #e8e8e8;
        }
        .row {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100px;
            .itemTit {
                font-size: 14px;
                font-weight: 400;
                line-height: 0px;
                color: #979797;
                margin-bottom: 17px;
            }
            .itemNum {
                font-size: 20px;
                font-weight: bold;
            }
        }
    }
    .jytjBox {
        height: 350px;
        margin-top: 10px;
    }
    .popupContent {
        display: flex;
        flex-direction: column;
        width: 75vw;
        text-align: center;
        padding-bottom: 30px;
        .title {
            padding: 20px 0px;
            .isTit {
                font-weight: bold;
                font-size: 13px;
            }
            .secTit {
                margin-top: 10px;
            }
        }
        .mainContent {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0px 30px;
            margin-top:15px;
            .resource{
                display: flex;
                align-items: center;
                img{
                    // width: 40px;
                    height:30px;
                    margin-right: 10px;
                }
            }
            .canUse {
                color: #66d6ff;
            }
        }
    }
}
</style>
